<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //案例1 —— 函数作为对象的方法调用时，函数上下文指向这个对象
        var a = 100;
        var obj = {
            a: 300,
            fun: function() {
                console.log(this.a);
            }
        };
        obj.fun(); //300

        //案例2
        var a = 100;
        var obj = {
            a: 300,
            fun: function() {  
                console.log(this.a);
            }
        };
        var fun = obj.fun;
        fun(); //100
        fun.call(obj); //300
        fun.bind(obj)(); //300
        obj.fun(); //300
        /**
        var fun = obj.fun.bind(obj);
        fun();*/

        //案例3——数组中存放函数，被数组索引调用，this上下文指向这个数组
        function fun() {
            console.log(this.length);
        }
        var length = 10;
        var arr = [100, 200, fun];
        fun(); //10
        arr[2](); //3

        // 判定this顺序 绑定优先级 例子
        var number = 1;
        var obj = {
            number: 2,
            showNumber: function() {
                this.number = 3;
                (function() {
                    console.log("a:",this.number); //1
                })(); 
                console.log("b:",this.number); //3
            }
        };
        obj.showNumber();

        setTimeout(function(){
            console.log("aa");
        },1000);
        console.log("bb");
        setTimeout(function(){
            console.log("cc");
        },500);
        console.log("dd");
        // bb dd cc aa
    </script>
</body>
</html>